<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>商品详情</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.topFix{
	height: 2rem;
	background: rgba(255,255,255,1);
	opacity: 0.8;
	padding: 0 0.5rem;
	z-index: 11;
}
.topFix .txt{
	font-size: 0.7rem;
	padding-left: 0.25rem;
}
.topFix .downBtn{
	width: 3.5rem;
	height: 1.3rem;
	line-height: 1.3rem;
	color: #fff;
	border-radius: 0.2rem;
	background: #e73350;
	font-size: 0.6rem;
	text-align: center;
}
.godInfo {
		margin-bottom: 0.25rem;
		background: #FFF;
		padding: 0.75rem;
	}
	.priceInfo {
		padding: 0.25rem 0;
		font-size: 0.6rem;
		color: #adadad;
		line-height: 1rem;
	}
	.priceInfo .price {
		font-size: 0.8rem;
	}
	.coupon {
		position: relative;
	}
	.couponInfo {
		position: absolute;
		left: 0;
		top: 0;
		width: 70%;
		height: 100%;
		color: #FFF;
	}
	.couponInfo .couponNum {
		font-size: 0.7rem;
		margin-bottom: 0.1rem;
	}
	.couponInfo .couponNum span {
		margin: 0 0.15rem;
		font-size: 1.5rem;
		line-height: 1;
	}
	.couponInfo .couponDate {
		font-size: 0.5rem;
	}
	.productDetail {
		background: #FFF;
	}
	.productDetail .ttl {
		font-size: 0.6rem;
		padding: 0.75rem;
	}
	.peoInfo{
		height: 2rem;
		background: #fff;
		padding: 0 1rem;
		margin-bottom: 0.2rem;
	}
	.peoInfo .img{
		width: 1.25rem;
		height: 1.25rem;
		margin-right: 0.5rem;
	}
	.footerSpace {
		height: 3rem;
	}
	#footer {
		background-color: #FFF;
		height: 3rem;
		padding: 0 0.75rem;
	}
	.btmShareBox{
		width: 100%;
	}
	.btmShareBox > div {
		width: 47%;
		height: 2rem;
		font-size: 0.7rem;
	}
	.btmShareBox .left {
		border-radius: 0.4rem;
		border: 1px solid #E73250;
		text-align: center;
		line-height: 18px;
		color: #E73250;
		margin-right: 0.75rem;
	}
	.btmShareBox .right {
		border-radius: 0.4rem;
		color: #FFF;
		background-image: linear-gradient(-5deg, #E73451 1%, rgba(231,50,80,0.66) 100%);
	}
	.btmShareBox img {
		margin-right: 0.25rem;
		height: 0.8rem;
		width: auto;
	}
	@media all and (max-width: 360px){
		.btmShareBox > div {
			font-size: 0.6rem;
		}
		.btmShareBox img {
			margin-right: 0.15rem;
			height: 0.75rem;
		}
	}
	.backFix{
		position: fixed;
		bottom: 5rem;
		right: 0;
		width: 2.5rem;
	}
	.backFix img{
		height: 1.9rem;
		width: 1.9rem;
	}
	.popBox{
		top: 50%;
		left: 50%;
		width: 85%;
		background: transparent;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
.popBox .popHeader{
	height: 2.35rem;
	line-height: 2.35rem;
	font-size: 0.75rem;
	text-align: center;
	color: #fff;
	background: #e73350;

}
.popBox .popCon{
	min-height: 6.25rem;
	text-align: center;
	padding-bottom: 1rem;
}
.popBox .popCon .tit{
	padding-top: 0.9rem;
}
.popBox .popCon .input{
	font-size: 0.7rem;
	color: #353335;
	height: 1.65rem;
	line-height: 1.65rem;
	background: #F7F9F9;
	text-align: center;
	width: 80%;
	margin: 0.6rem auto;
}
.popBox .closeBtm{
	position: absolute;
	left: 50%;
	top: 100%;
	-webkit-transform: translate(-50%,100%);
	transform: translate(-50%,100%);
}
.popBox .closeBtm img{
	height: 1.6rem;
	margin: 0 auto;
}
.copyBtn {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #F00;
	opacity: 0;
	z-index: 4;
}
</style>
</head>

<body class="bg-f5">
	<div class="topFix comFlexItem">
		<div><img src="../../image/common/applogo.png" style="height:1.5rem" alt=""></div>
		<div class="flex-auto txt">下载有蜜APP，更多优惠商品</div>
		<div class="downBtn">下载App</div>
	</div>
	<div id="data_html"></div>
	<script type="text/x-dot-template" id="data_tpl">
		<div class="swiper-container mainImg">
			<div class="swiper-wrapper">
				{{ if(it.small_images[0]){ }}
				{{ for(var i in it.small_images) { }}
				<div class="swiper-slide"><img src="{{= it.small_images[i] }}" width="100%" alt=""></div>
				{{ } }}
				{{ }else{ }}
				<div class="swiper-slide"><img src="{{= it.pict_url }}" width="100%" alt=""></div>
				{{ } }}
			</div>
		</div>
		<div class="godInfo">
			<div class="godTitle"><span class="ttlTag">{{= it.user_type }}</span>{{= it.title }}</div>
			<div class="priceInfo aui-flex-col aui-flex-middle font-helvet">
				<div class="color-red aui-margin-r-10">券后价 <span class="price">¥{{= it.coupon_amount }}</span></div>
				<div>现价 ¥{{= it.zk_final_price }}</div>
				<div class="flex-auto aui-font-size-10 aui-text-right">月销 {{= it.volume }}件</div>
			</div>
			{{ if(it.coupon_info){ }}
			<div class="coupon" tapmode onclick="taobao();">
				<img src="../../image/best/coupon.png" width="100%" alt="">
				<div class="couponInfo aui-flex-row aui-flex-middle aui-flex-center">
					<div class="couponNum">￥<span>{{= it.coupon_info }}</span>优惠券</div>
					<div class="couponDate">使用期限 {{= Date.parse(it.coupon_start_time).toString('yyyy.M.d')}}-{{= Date.parse(it.coupon_end_time).toString('yyyy.M.d')}}</div>
				</div>
			</div>
			{{ } }}
		</div>
		<div class="peoInfo comFlexItem aui-hide">
			<div class="img"><img src="../../image/demo/tou_h5.png" style="height:1.25rem" alt=""></div>
			<div class="flex-auto aui-font-size-14 color-000">KELLY 霏霏邀请你省钱</div>
			<div class="aui-font-size-12 color-ad aui-padded-r-15 right-arrow" tapmode onclick="openHtml()">他的推荐</div>
		</div>
		<div class="productDetail aui-hide">
			<div class="ttl">商品详情</div>
			<div class="detail">
				
			</div>
		</div>
		<div class="footerSpace"></div>
		<div class="btmFix aui-flex-col aui-flex-middle aui-flex-between aui-border-t" id="footer">
			<div class="btmShareBox aui-flex-col aui-flex-between aui-flex-middle">
				<div class="left" tapmode onClick="openWin();">
					<div class="aui-font-size-15">VIP大礼包</div>
					<div class="aui-font-size-10">成为vip,自省赚礼包</div>
				</div>
				<div class="right aui-flex-col aui-flex-middle aui-flex-center relative">
					{{ if( it.coupon_info ){ }}
					<div><img src="../../image/common/36.png" alt=""></div>
					<div>领券购¥{{= it.coupon_info }}券</div>
					{{ }else{ }}
					<div>获取淘口令</div>
					{{ } }}
					<button class="copyBtn" data-clipboard-text="{{= getCode() }}">复制口令</button>
				</div>
			</div>
		</div>
		<div class="kouBox">
			<div class="popOverlay aui-hide" tapmode onclick="closeMask()"></div>
			<div class="popBox aui-hide">
				<div class="popHeader copyStatus">自动复制失败，请手动复制淘口令</div>
				<div class="popCon bg-white">
					<div class="aui-font-size-12 tit">使用说明：打开手机淘宝，即可领取优惠券</div>
					<div><input type="text" class="input" value="{{= getCode() }}" id="taoCode" readonly></div>
					<div class="aui-font-size-12 color-ad">长按复制上方淘口令</div>
				</div>
				<div class="closeBtm" tapmode onclick="closeMask()"><img src="../../image/common/08.png" alt=""></div>
			</div>
		</div>
	</script>

</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/clipboard.min.js"></script>
<script type="text/javascript">
var PARAM = GetRequest();
var topSwiper;
var GOD_INFO;
var clipboard;
function getCode(){
	var code = PARAM.code ? PARAM.code : '';
	return code;
}

getdetails()
function sliderInit(){
	topSwiper = new Swiper('.mainImg',{
		speed: 600,
		autoplay: false
	});
}
function showMask(){
	$$('.popOverlay').removeClass('aui-hide');
	$$('.popBox').removeClass('aui-hide');
}
function closeMask(){
	$$('.popOverlay').addClass('aui-hide');
	$$('.popBox').addClass('aui-hide');
}
function openHtml(){
	window.location.href = 'wx_tk_referee.html'
}

function getdetails(){
	$.ajax({
      url: BASE_URL_2 + 'App/Select/shopDetail',
      type: 'post',
			data: {
				shop_id: PARAM.shopid
			},
      dataType: 'json',
      timeout: 6000,
      headers: {
          Accept: "application/json; charset=utf-8",
      },
      success: function (ret) {
		if (ret && ret.code == 1 ) {
			GOD_INFO = ret.data;
			var tpl = $('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$('#data_html').html(tempFn(ret.data));
			sliderInit();
			
			
			
        } else {

        }
      },
      error: function (err) {

      }
  })

}

clipboard = new ClipboardJS('.copyBtn');
clipboard.on('success', function(e) {
	$('.copyStatus').text('复制成功，请打开淘宝领取');
	showMask();
});
clipboard.on('error', function(e) {
	$('.copyStatus').text('复制失败，请手动复制');
	showMask();
});

</script>
</html>
